<template>
    <div class="app-container">
        <div class="appRightTop">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
                <el-form-item label="角色名称">
                    <el-input v-model="queryParams.standardChName" clearable />
                </el-form-item>
                <el-form-item label="角色状态">
                    <el-select v-model="queryParams.useStatus" placeholder="请选择角色状态">
                        <el-option label="已启动" value="1"></el-option>
                        <el-option label="未启动" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="handleQuery" class="gotoseach">搜索</el-button>
                    <span type="text" @click="resetQuery" style="
                                color: #7483a6;
                                font-size: 16px;
                                font-weight: 500;
                                cursor: pointer;
                                marginleft: 20px;
                              ">重置</span>
                </el-form-item>
            </el-form>
        </div>
        <div class="btnList">
            <el-button type="primary" @click="addStandar()" class="addStyle">新建</el-button>
            <el-button @click="removeAll()" :disabled="disabledInfo">批量删除</el-button>
        </div>
        <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" max-height="680"
            class="TableStyle">
            <el-table-column show-overflow-tooltip type="selection" width="100" align="center" />
            <el-table-column show-overflow-tooltip label="角色名称" prop="serviceName" />
            <el-table-column show-overflow-tooltip label="角色类型" prop="typeId">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="角色状态" prop="useStatus">
                <template slot-scope="scope">
                    <span v-if="scope.row.useStatus == 0">未启动</span>
                    <span v-else>已启动</span>
                </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip label="维护时间"  prop="createTime" /> -->
            <el-table-column prop="createTime" label="维护时间" width="160">
                <template slot-scope="scope">
                    <span>{{ formatTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="维护人" prop="authorName" />
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <!-- 数据权限 -->
                    <el-tooltip class="item" effect="dark" content="数据权限" placement="top">
                        <el-button type="text" class="nolockColor" @click="dataPartition(scope.row)">
                            <!-- <span class="iconfont look">&#xe66b;</span> -->
                            数据权限
                        </el-button>
                    </el-tooltip>

                    <!-- 操作权限 -->
                    <el-tooltip class="item" effect="dark" content="操作权限" placement="top">
                        <el-button type="text" class="nolockColor" v-if="scope.row.useStatus == 0"
                            @click="operatingAuthorizationFn(scope.row)">
                            操作权限
                            <!-- <span class="iconfont">&#xe773;</span> -->
                        </el-button>
                    </el-tooltip>

                    <!-- 删除 -->
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button type="text" class="nolockColor" v-if="scope.row.useStatus == 0"
                            @click="handleDelete(scope.row)">
                            删除
                            <!-- 删除 -->
                            <!-- <span class="iconfont">&#xe74e;</span> -->
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginationBigbox">
            <div class="paginationbox">
                <el-pagination @size-change="handleSizeChange" :current-page.sync="queryParams.current"
                    @current-change="handleCurrentChange" :page-size="queryParams.size" layout="total,prev, pager, next"
                    background :total="pageTotal" ref="pagination">
                </el-pagination>
            </div>
        </div>
        <!-- 数据权限的弹框 -->
        <el-dialog title="数据权限" :visible.sync="dataPartitionBloon" width="30%" :before-close="handleClose"
            :modal="false" :close-on-click-modal="false">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="权限范围" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择权限范围">
                        <el-option label="全部数据权限" value="全部数据权限"></el-option>
                        <el-option label="本机构数据权限" value="本机构数据权限"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dataPartitionBloon = false">取 消</el-button>
                <el-button type="primary" @click="dataPartitionFn">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 操作权限 -->
        <operatingAuthorization v-if="operatingAuthorizationBloon"
            :operatingAuthorizationBloon="operatingAuthorizationBloon" @closeopenAuthorization="closeopenAuthorization">
        </operatingAuthorization>
    </div>
</template>
  
<script>
import moment from "moment";
import operatingAuthorization from "./componnets/operatingAuthorization.vue"
export default {
    name: "permissionConfiguration",
    components: {
        operatingAuthorization,
    },
    data() {
        return {
            // 总条数
            pageTotal: 12,
            //批量删除的状态
            disabledInfo: true,
            //数据权限的弹框
            dataPartitionBloon: false,
            //操作权限的弹框
            operatingAuthorizationBloon: false,
            // 遮罩层
            loading: false,
            //搜索条件
            queryParams: {
                catalogueId: "", // 标准集id
                standardId: "", //标准编号
                standardChName: "", //标准中文名
                standardName: "", //标准英文名
                page: 1,
                size: 10,
            },
            //table的数据
            postList: [
                {
                    serviceName: '角色名称1',
                    typeId: '普通角色',
                    useStatus: 0,
                    createTime: '2021-09-14     10:00:00',
                    authorName: 'admin'
                },
                {
                    serviceName: '角色名称1',
                    typeId: '普通角色',
                    useStatus: 0,
                    createTime: '2021-09-14     10:00:00',
                    authorName: 'admin'
                },
            ],
            //批量删除中选中的项list
            selection: [],
            //数据权限的表单
            ruleForm: {},
            rules: {
                region: [
                    { required: true, message: '请选择权限范围', trigger: 'change' }
                ],
            }
        };
    },
    mounted() {

    },
    methods: {
        //搜索
        handleQuery() {

        },
        //重置
        resetQuery() {

        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selection = selection;
            if (selection.length > 1) {
                this.disabledInfo = false;
            }
        },
        //数据权限
        dataPartition(val) {
            this.dataPartitionBloon = true;
        },
        //数据权限点击确认
        dataPartitionFn() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.dataPartitionBloon = false;
                } else {
                    // console.log("error submit!!");
                    return false;
                }
            })
        },
        //操作权限
        operatingAuthorizationFn() {
            this.operatingAuthorizationBloon = true;
        },
        //删除
        handleDelete() {
            this.$modal.confirm("是否永久删除？删除后将无法恢复").then(() => {

            });
        },
        //处理时间
        // 时间格式化
        formatTime(time) {
            // return utils.rTime(time);
            return moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        handleSizeChange(val) {
            this.queryParams.size = val;
        },
        handleCurrentChange(val) {
            this.queryParams.current = val;
        },
        //点击关闭的时候
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        //操作权限关闭弹框
        closeopenAuthorization() {
            this.operatingAuthorizationBloon = false;
        }
    }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
@import "~@/assets/styles/CommonStyle.scss";
</style>
  